<style>
    #zzdz-tools .layui-card-header {
        font-weight: 600;
    }

    #zzdz-tools p {
        margin-bottom: 10px
    }
</style>
<div class="layui-fluid layui-anim zzdz-anim" id="zzdz-tools" lay-title="ZZDZ工具">
    <div class="layui-row layui-col-space8 zzdz-container">
        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">弹出层</div>
                <div class="layui-card-body">
                    <p>zzdz.modal.info / warn / success / error()，使用 layer.alert()
                        实现，参数与官网一致。</p>
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-normal" id="modal-info">信息</button>
                        <button class="layui-btn layui-btn-warm" id="modal-warn">警告</button>
                        <button class="layui-btn layui-btn-success" id="modal-success">成功</button>
                        <button class="layui-btn layui-btn-danger" id="modal-error">错误</button>
                        <button class="layui-btn layui-btn-normal" id="modal-confirm">confirm</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">提示层</div>
                <div class="layui-card-body">
                    <p>zzdz.alert.info / warn / success / error()，使用 layer.alert()
                        实现，参数与官网一致。</p>
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-normal" id="alert-info">信息</button>
                        <button class="layui-btn layui-btn-warm" id="alert-warn">警告</button>
                        <button class="layui-btn layui-btn-success" id="alert-success">成功</button>
                        <button class="layui-btn layui-btn-danger" id="alert-error">错误</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">popup层</div>
                <div class="layui-card-body">
                    <p>使用 zzdz.modal.open() 打开任意网址，使用 layer.open() 实现，参数与官网一致。</p>
                    <div class="layui-btn-container">
                        <button class="layui-btn  layui-btn-primary" id="popup-out">外部网页</button>
                        <button class="layui-btn  layui-btn-primary" id="popup-inner">内部网页</button>
                        <button class="layui-btn  layui-btn-primary" id="popup-clean">简洁风格</button>
                        <button class="layui-btn  layui-btn-primary" id="popup-with-button">添加按钮</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">Tab操作</div>
                <div class="layui-card-body">
                    <p>刷新当前Tab页面：<a id="refresh-tab">点击刷新</a></p>
                    <pre class="layui-code" lay-title="JavaScript" lay-encode="true">
// html
<a>点击刷新</a>
// js
$('a').on('click', function () {
    zzdz.view.tab.refresh();
}
                    </pre>
                    <p>切换到指定Tab页面：<a id="change-tab">点击切换到首页</a></p>
                    <pre class="layui-code" lay-title="JavaScript" lay-encode="true">
// html
<a>点击切换</a>
// js
$('a').on('click', function () {
    zzdz.view.tab.change("/index");
}
                    </pre>
                    <p>关闭指定Tab页面：<a id="del-tab">点击关闭当前Tab页，并跳转到首页</a></p>
                    <pre class="layui-code" lay-title="JavaScript" lay-encode="true">
// html
<a>点击切换</a>
// js
$('a').on('click', function () {
    var currentUrl = window.location.hash.replace('#', '');
    zzdz.view.tab.del(currentUrl);
    zzdz.view.tab.change("/index");
}
                    </pre>
                    <span class="zzdz-alert-base zzdz-alert-success">更多Tab的操作可以阅读static/zzdz/lay/modules/view.js源码。</span>
                </div>
            </div>
        </div>
        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">路由Router操作</div>
                <div class="layui-card-body">
                    <p>路由跳转拦截：</p>
                    <pre class="layui-code" lay-title="JavaScript">
zzdz.routeLeave(function (route, nextPath, next) {
    // route 当前页面路由信息
    // nextPath 将要去到的路径
    // next() 执行跳转页面
})
                    </pre>
                    <p>获取当前路由地址：</p>
                    <pre class="layui-code" lay-title="JavaScript">
var url = zzdz.route.href;
                    </pre>
                </div>
            </div>
        </div>
        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">LoadBar</div>
                <div class="layui-card-body">
                    <p>点击查看效果：</p>
                    <button class="layui-btn layui-btn-normal" id="load-start">开始 Start</button>
                    <button class="layui-btn layui-btn-normal" id="load-finish">结束 Finish</button>
                    <button class="layui-btn layui-btn-danger" id="load-error">错误 Error</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script data-th-inline="javascript" type="text/javascript">
    layui.use(['zzdz', 'code'], function () {
        var $ = layui.jquery,
            zzdz = layui.zzdz,
            $view = $("#zzdz-tools");

        layui.code();
        // ------------ 弹出层 ------------------------
        $view.find('#modal-info').on('click', function () {
            zzdz.modal.info('请输入标题', '请输入内容', function () {
                zzdz.alert.info("确定按钮回调");
            });
        });
        $view.find('#modal-warn').on('click', function () {
            zzdz.modal.warn('请输入标题', '请输入内容', function () {
                zzdz.alert.info("确定按钮回调");
            });
        });
        $view.find('#modal-success').on('click', function () {
            zzdz.modal.success('请输入标题', '请输入内容', function () {
                zzdz.alert.info("确定按钮回调");
            });
        });
        $view.find('#modal-error').on('click', function () {
            zzdz.modal.error('请输入标题', '请输入内容', function () {
                zzdz.alert.info("确定按钮回调");
            });
        });
        $view.find('#modal-confirm').on('click', function () {
            zzdz.modal.confirm('请输入标题', '请输入内容', function () {
                zzdz.alert.info("确定按钮回调");
            }, function () {
                zzdz.alert.info("取消按钮回调");
            });
        });

        // ------------------- 提示层 ---------------------
        $view.find('#alert-info').on('click', function () {
            zzdz.alert.info("提示信息");
        });
        $view.find('#alert-warn').on('click', function () {
            zzdz.alert.warn("告警信息");
        });
        $view.find('#alert-success').on('click', function () {
            zzdz.alert.success("成功信息");
        });
        $view.find('#alert-error').on('click', function () {
            zzdz.alert.error("错误信息");
        });

        // -------------------- popup ----------------------
        $view.find('#popup-out').on('click', function () {
            zzdz.modal.open('百度一下，你就知道', 'https://www.baidu.com');
        });
        $view.find('#popup-inner').on('click', function () {
            zzdz.modal.open('内部网页', 'others/apex/radar', {
                //传递参数，弹出的页面可以使用 POPUP_DATA.username 获取值
                data: {
                    username: 'Zzdz'
                }
            });
        });
        $view.find('#popup-clean').on('click', function () {
            zzdz.modal.view('博客地址', 'https://mrbird.cc');
        });

        $view.find('#popup-with-button').on('click', function () {
            zzdz.modal.view('博客地址', 'https://mrbird.cc', {
                btn: ['确定', '取消'],
                yes: function () {
                    zzdz.alert.info('确定按钮回调');
                },
                btn2: function () {
                    zzdz.alert.info('取消按钮回调');
                    return false;
                }
            });
        });

        //  ------------------- tab操作 ---------------------------
        $view.find('a#refresh-tab').on('click', function () {
            var isTab = currentUser.isTab;
            if (isTab === '1') {
                zzdz.view.tab.refresh();
            } else {
                window.location.reload();
            }
            zzdz.alert.success('刷新完毕')
        });
        $view.find('a#change-tab').on('click', function () {
            zzdz.view.tab.change("/index");
        });
        $view.find('a#del-tab').on('click', function () {
            var currentUrl = window.location.hash.replace('#', '');
            zzdz.view.tab.change("/index");
            zzdz.view.tab.del(currentUrl);
        });

        // -------------- LoadBar --------------------------------
        $view.find('#load-start').on('click', function () {
            zzdz.view.loadBar.start();
        });
        $view.find('#load-finish').on('click', function () {
            zzdz.view.loadBar.finish();
        });
        $view.find('#load-error').on('click', function () {
            zzdz.view.loadBar.start();
            setTimeout(function () {
                zzdz.view.loadBar.error();
            }, 1000);
        });
    });
</script>